<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import { deviceDetection } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { getDictData } from "@/api/system";
import { useUserStore } from "@/store/modules/user";
import { setNoticeRead, getNoticeList } from "@/api/notices";
import { emitter } from "@/utils/mitt";
const useUserStoreInfo = useUserStore();
const levels = useUserStoreInfo.user.roles.map(item => item.level);

levels.sort((i, b) => b - i);
const subChildrens = reactive({
  data: []
});
const init = async () => {
  const { content } = await getDictData({
    dictName: "sub_system_childrens",
    page: 0,
    size: 9999
  });
  subChildrens.data = content;
};

const { tooltipEffect } = useNav();
const myNoticles = ref([]);
const myTotal = ref(0);
const myPage = ref(1);
const mymoreLoading = ref(false);
const setColor = type => {
  return "#fff";
  // switch (type) {
  //   case 1:
  //     return "#409eff";
  //   case 2:
  //     return "#67c23a";
  //   case 3:
  //     return "#eebe77";
  //   case 4:
  //     return "#f56c6c";
  //   case 5:
  //     return "#9f0000";
  // }
};
const setTitleLast = type => {
  switch (type) {
    case 1:
      return "普通";
    case 2:
      return "预警";
    case 3:
      return "警告";
    case 4:
      return "漏洞";
    case 5:
      return "紧急";
  }
};
const setType = type => {
  switch (type) {
    case 1:
      return "info";
    case 2:
      return "";
    case 3:
      return "warning";
    case 4:
      return "danger";
    case 5:
      return "danger";
  }
};
const isMobile = deviceDetection();
const activeNotice = reactive({
  data: null
});

const msgLoading = ref(false);
const setRead = async item => {
  if (item.isRead === 0) {
    // 通知右上角通知
    await setNoticeRead({ id: item.id });
    emitter.emit("topReadItem", item);
    myNoticles.value.forEach(i => {
      if (i.id === item.id) {
        i.isRead = 1;
      }
    });
  }
  msgLoading.value = true;
  activeNotice.data = item;
  setTimeout(() => {
    msgLoading.value = false;
  }, 200);
};
const getNoticesList = async getOne => {
  mymoreLoading.value = true;
  let data = await getNoticeList({
    noticeGroups: levels[0],
    size: 10,
    current: myPage.value
  });
  data.content.forEach(item => {
    let subDict = subChildrens.data.find(
      i => i.value === item.subApplicationType + ""
    );
    item.subApplicationTypeName = subDict ? subDict.label : "";
    item.isRead = item.isRead ? item.isRead : 0;
  });
  myTotal.value = data.totalElements;
  if (getOne) {
    myNoticles.value = data.content;
  } else {
    data.content.forEach(i => {
      myNoticles.value.push(i);
    });
  }
  mymoreLoading.value = false;
};
const getMore = () => {
  if (myNoticles.value.length >= myTotal.value) {
    return;
  }
  myPage.value = myPage.value + 1;
  getNoticesList();
};
const setItemRead = item => {
  myNoticles.value.forEach(i => {
    if (i.id === item.id) {
      i.isRead = 1;
    }
  });
};
const isResh = ref(false);
const refresh = () => {
  myPage.value = 1;
  getNoticesList(true);
  isResh.value = false;
};
onMounted(async () => {
  emitter.on("readItem", item => {
    setItemRead(item);
  });
  emitter.on("haveNotReadNew", () => {
    // console.log("有新消息，提示刷新");
    ElMessageBox.confirm("有新的通知信息，是否刷新列表?", "系统提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info"
    })
      .then(() => {
        myPage.value = 1;
        getNoticesList(true);
        isResh.value = false;
      })
      .catch(() => {
        // 显示更多按钮 变成刷新按钮
        isResh.value = true;
      });
  });
  await init();
  getNoticesList();
});
onBeforeUnmount(() => {
  emitter.off("readItem");
  emitter.off("haveNotReadNew");
});
</script>

<template>
  <div class="main flex" style="height: calc(100vh - 150px)">
    <div
      v-loading="mymoreLoading"
      class="w-[400px] h-full pr-[20px]"
      style="overflow: hidden"
    >
      <div
        v-if="!myNoticles.length"
        class="bg-white flex justify-center align-center"
        style="height: 100%"
      >
        <el-empty description="暂无通知" />
      </div>
      <el-scrollbar v-if="myNoticles.length" style="height: calc(100% - 50px)">
        <div class="p-[10px]">
          <el-card
            v-for="(item, index) in myNoticles"
            :key="item.id"
            shadow="hover"
            class="cursor-pointer notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030] mb-[10px]"
            @click="setRead(item)"
          >
            <div class="flex justify-between">
              <div class="flex">
                <div>{{ index + 1 }}、</div>
                <div class="w-full flex-[1] flex justify-between">
                  <el-tooltip
                    popper-class="notice-title-popper"
                    :enterable="!isMobile"
                    :effect="tooltipEffect"
                    :content="item.title"
                    placement="top-start"
                    :disabled="true"
                  >
                    <span class="dark:text-white title-over">
                      {{ item.title }}
                    </span>
                  </el-tooltip>
                </div>
              </div>
              <div class="flex flex-col">
                <el-tag
                  :type="setType(item.noticeType)"
                  size="small"
                  effect="dark"
                  class="text-[12px] text-bold"
                  :style="{ color: setColor(item.noticeType) }"
                  >{{ setTitleLast(item.noticeType) }}</el-tag
                >
                <!--                <el-button-->
                <!--                  v-if="item.isRead === 0"-->
                <!--                  type="primary"-->
                <!--                  size="small"-->
                <!--                  @click="setRead(item)"-->
                <!--                  >点击已读</el-button-->
                <!--                >-->
              </div>
            </div>
            <div class="notice-container-text">
              <div class="notice-text-title text-[#000000d9] dark:text-white">
                <el-tooltip
                  popper-class="notice-title-popper"
                  :effect="tooltipEffect"
                  :content="item.content"
                  placement="top-start"
                  :enterable="!isMobile"
                  :disabled="true"
                >
                  <div
                    ref="titleRef"
                    class="dark:text-white notice-title-content"
                  >
                    {{ item.content }}
                  </div>
                </el-tooltip>
              </div>
              <div
                class="notice-text-datetime text-[#00000073] dark:text-white flex justify-between"
              >
                <span class="text-[#409eff]">
                  <i>{{ item.subApplicationTypeName }}</i>
                  -
                  <i>{{ item.subApplicationModules }}</i>
                  -
                  <i>{{ item.createTime }}</i>
                </span>
                <span v-if="item.isRead === 0" class="text-rose-500">未读</span>
                <span v-if="item.isRead === 1">已读</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-scrollbar>
      <div v-if="myNoticles.length" class="py-[10px]">
        <el-button
          v-if="myTotal > myNoticles.length && !isResh"
          :loading="mymoreLoading"
          type="primary"
          class="w-full"
          @click="getMore"
          >显示更多</el-button
        >
        <el-button
          v-if="isResh"
          :loading="mymoreLoading"
          type="primary"
          class="w-full"
          @click="refresh"
          >刷新列表</el-button
        >
      </div>
    </div>
    <div class="flex-[1] h-full">
      <el-card v-loading="msgLoading" class="w-full h-full my-card">
        <div
          v-if="!activeNotice.data"
          class="w-full h-full flex justify-center align-center"
        >
          <el-empty description="点击左侧列表显示对应通知" />
        </div>
        <div v-else class="w-full h-full flex flex-col">
          <div class="flex justify-between">
            <h2>{{ activeNotice.data.title }}</h2>
            <span>
              <el-tag
                :type="setType(activeNotice.data.noticeType)"
                size="small"
                effect="dark"
                class="text-[12px] text-bold"
                :style="{ color: setColor(activeNotice.data.noticeType) }"
                >{{ setTitleLast(activeNotice.data.noticeType) }}</el-tag
              >
            </span>
          </div>
          <p class="py-[20px] flex-[1]">{{ activeNotice.data.content }}</p>
          <span class="text-[#409eff]">
            <i>{{ activeNotice.data.subApplicationTypeName }}</i>
            -
            <i>{{ activeNotice.data.subApplicationModules }}</i>
            -
            <i>{{ activeNotice.data.createTime }}</i>
          </span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.notice-container {
  padding: 12px 0;

  // border-bottom: 1px solid #f0f0f0;

  .notice-container-avatar {
    margin-right: 16px;
    background: #fff;
  }

  .notice-container-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    .notice-text-title {
      display: flex;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5715;
      cursor: pointer;

      .notice-title-content {
        flex: 1;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .notice-title-extra {
        float: right;
        margin-top: -1.5px;
        font-weight: 400;
      }
    }

    .notice-text-description,
    .notice-text-datetime {
      font-size: 12px;
      line-height: 1.5715;
    }

    .notice-text-description {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .notice-text-datetime {
      margin-top: 4px;
    }
  }
}

.title-over {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.my-card {
  :deep(.el-card__body) {
    width: 100%;
    height: 100%;
  }
}
</style>
